<template>
  <div class="content">
    <!-- 上部分 -->
    <div class="top-box">
      <div class="top-left">
        <el-card class="today-summary" shadow="hover">
          <h4>今日概括</h4>
          <div class="wrapper">
            <div class="box item-1">
              <div>
                <img src="@/assets/homepage/home/icon_order.png" alt>
                <span>订单数</span>
              </div>
              <span>
                <strong>{{ toThousands(today.orderCount) }}</strong>
                <span>单</span>
              </span>
            </div>
            <div class="box item-2">
              <div>
                <img src="@/assets/homepage/home/icon_sale.png" alt>
                <span>销售金额</span>
              </div>
              <span>
                <strong>{{ toThousandsFloat(today.orderSaleAmount) }}</strong>
                <span>元</span>
              </span>
            </div>
            <div class="box item-3">
              <div>
                <img src="@/assets/homepage/home/icon_unsubscribe.png" alt>
                <span>退订单数</span>
              </div>
              <span>
                <strong>{{ toThousands(today.refundOrderCount) }}</strong>
                <span>单</span>
              </span>
            </div>
            <div class="box item-4">
              <div>
                <img src="@/assets/homepage/home/icon_backNum.png" alt>
                <span>退订金额</span>
              </div>
              <span>
                <strong>{{ toThousandsFloat(today.refundOrderAmount) }}</strong>
                <span>元</span>
              </span>
            </div>
          </div>
        </el-card>
        <el-card class="merchant-overview" shadow="hover">
          <h4>商户信息</h4>
          <div class="wrapper">
            <div class="box">
              <div>
                <img src="@/assets/homepage/home/icon_merchant_name.png" alt>
              </div>
              <div>
                <span>商户企业</span>
                <span class="explain">武汉六个六科技有限公司</span>
              </div>
            </div>
            <div class="box">
              <div>
                <img src="@/assets/homepage/home/icon_merchant_ID.png" alt>
              </div>
              <div>
                <span>商户 ID</span>
                <span class="explain">R201034319899795456</span>
              </div>
            </div>
            <div class="box">
              <div>
                <img src="@/assets/homepage/home/icon_merchant_balance.png" alt>
              </div>
              <div>
                <span>商户资金余额</span>
                <span class="explain">¥8888.00</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <el-card class="top-right" shadow="hover">
        <h4>平台公告</h4>
        <div class="title">
          <div v-for="(item,index) in noticeList" :key="index">
            <span class="heading" @click="Jump(item)">{{ item.title }}</span>
            <span class="date">{{ item.created_at }}</span>
          </div>
        </div>
        <div class="see-more">
          <span @click="toUrl">查看全部</span>
          <img src="@/assets/homepage/home/fill.png" alt @click="toUrl">
        </div>
      </el-card>
    </div>
    <!-- 中部分 -->
    <div class="middle-box">
      <el-card class="item-sales" shadow="hover">
        <div class="header">
          <h4>近七天销售额</h4>
        </div>
        <Chart :options="saleroom" width="800px" height="380px" />
      </el-card>
      <el-card class="company-sales" shadow="hover">
        <div class="header">
          <h4>商户销量 TOP 10</h4>
          <el-date-picker
            v-model="companyStatistics"
            type="month"
            placeholder="选择日期"
            value-format="yyyy-MM"
            :clearable="false"
            @change="getStatisticsModule(merchant, 'MERCHANT', companyStatistics)"
          />
        </div>
        <div ref="merchantNoData" class="merchantNoData noData">
          <img src="@/assets/homepage/home/noData.png" alt>
          <span>暂无数据</span>
        </div>
        <Chart :options="merchant" width="800px" height="380px" />
      </el-card>
    </div>
    <!-- 尾部分 -->
    <el-card class="bottom-box" shadow="hover">
      <div class="header">
        <h4>月统计</h4>
        <el-date-picker
          v-model="monthStatistics"
          type="month"
          placeholder="选择日期"
          value-format="yyyy-MM"
          :clearable="false"
          @change="getStatisticsModule(month, 'MONTH', monthStatistics)"
        />
      </div>
      <div class="wrapper">
        <div class="box">
          <span>月订单数</span>
          <span><strong>{{ toThousands(month.monthOrderCount) }}</strong><span>单</span></span>
        </div>
        <div class="box">
          <span>月销售额</span>
          <span><strong>{{ toThousandsFloat(month.monthSaleAmount) }}</strong><span>元</span></span>
        </div>
        <div class="box">
          <span>月订单退款数量</span>
          <span><strong>{{ toThousands(month.monthRefundOrderCount) }}</strong><span>单</span></span>
        </div>
        <div class="box">
          <span>月退款金额</span>
          <span><strong>{{ toThousandsFloat(month.monthRefundOrderAmount) }}</strong><span>元</span></span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { removeToken } from '@/utils/auth'
import Cookies from 'js-cookie'
import Chart from '@/components/Chart'
import dayjs from 'dayjs'
import { getNoticeList } from '@/api/notice'
export default {
  name: 'Home',
  components: {
    Chart
  },
  data() {
    return {
      today: {
        orderCount: 0,
        orderSaleAmount: 0,
        refundOrderCount: 0,
        refundOrderAmount: 0
      },
      saleroom: {
        tooltip: {
          show: true,
          // triggerOn: 'hover',
          position: 'top',
          formatter: '{c}'
        },
        // backgroundColor: 'rgb(128, 128, 128)',
        xAxis: {
          boundaryGap: true,
          data: ['12-12', '12-13', '12-14', '12-15', '12-16', '12-17', '12-18'],
          axisTick: { // 坐标轴刻度相关设置。
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#D0D2D5', // 左边线的颜色
              width: '2'// 坐标线的宽度
            }
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: false,
          axisLabel: {
            formatter: '{value}k',
            textStyle: {
              color: '#D0D2D5'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              type: 'solid',
              color: '#fff',
              width: '2'
            }
          },
          max: function(value) {
            return value.max + 500
          }
        },
        color: ['#77DFB5'],
        grid: {
          top: '5%',
          left: '6%'
        },
        series: [{
          name: '销量',
          type: 'line',
          data: [0, 500, 360, 1000, 1500, 2000, 1000],
          normal: {
            color: '#77DFB5'
          },
          areaStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#7BE0B7' // 0% 处的颜色
                }, {
                  offset: 1, color: '#ffffff' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        }]
      },
      merchant: {
        grid: {
          top: '5%',
          left: '6%'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: ['商品一', '商品二', '商品三', '商品四', '商品五', '商品六', '商品七', '商品八', '商品九', '商品十'],
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#D0D2D5', // 左边线的颜色
              width: '2'// 坐标线的宽度
            }
          },
          axisTick: { // 坐标轴刻度相关设置。
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              type: 'solid',
              color: '#fff',
              width: '2'
            }
          },
          max: function(value) {
            return value.max + 500
          },
          axisLabel: {
            textStyle: {
              color: '#D0D2D5'
            }
          }
        },
        tooltip: {
          show: true,
          formatter: '{c}'
        },
        series: [{
          data: [200, 100, 1360, 100, 150, 2000, 1000, 1350, 1020, 1030],
          type: 'bar',
          barWidth: 30,
          itemStyle: {
            normal: {
              color: '#95A9F2'
            }
          }
        }]
      },
      // 平台公告
      noticeList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      month: {
        monthOrderCount: 0,
        monthSaleAmount: 0,
        monthRefundOrderCount: 0,
        monthRefundOrderAmount: 0
      },
      query: {
        limit: 20, // 每页数量
        page: 1, // 页码
        title: '' // 标题
      },
      companyStatistics: dayjs().format('YYYY-MM'), // 月统计
      monthStatistics: dayjs().format('YYYY-MM') // 月统计
    }
  },
  created() {
    this.chushihua()
    this.getNoticeList()
    this.sort(this.merchant.xAxis.data, this.merchant.series[0].data)
  },
  methods: {
    // 初始化
    chushihua() {
      if (localStorage.getItem('reload') === '0') {
        sessionStorage.setItem('reload', '1')
        location.reload()
      }
      if (localStorage.getItem('store') === null) {
        removeToken()
        this.$router.push('login')
        Cookies.remove('sign')
      }
    },
    toThousandsFloat(str) {
      return parseFloat(str)
        .toFixed(2)
        .toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
    },
    toThousands(str) {
      return parseFloat(str)
        .toFixed(0)
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    },
    async getStatisticsModule(object, type, value) {
      // const map = {
      //   'PRODUCT': { ref: 'productNoData', fieldA: 'description', fieldB: 'num' },
      //   'MERCHANT': { ref: 'merchantNoData', fieldA: 'company_name', fieldB: 'sum(merchant_price)' }
      // }

      if (type === 'MONTH') {
        //
        this.month.monthOrderCount = this.month.monthOrderCount + 1
        this.month.monthSaleAmount = this.month.monthSaleAmount + 1
        this.month.monthRefundOrderCount = this.month.monthRefundOrderCount + 1
        this.month.monthRefundOrderAmount = this.month.monthRefundOrderAmount + 1
      } else {
        // this.$refs.merchantNoData.className = 'noData'
        this.merchant.series[0].data = [200, 100, 1360, 100, 150, 1000, 2000, 1500, 1020, 1030]
        this.merchant.xAxis.data = ['商品一', '商品二', '商品三', '商品四', '商品五', '商品六', '商品七', '商品八', '商品九', '商品十']
        this.sort(this.merchant.xAxis.data, this.merchant.series[0].data)
      }
    },
    toUrl() {
      this.$router.push({ name: 'noticeList' })
    },
    getNoticeList() {
      getNoticeList(this.query).then(res => {
        console.log('getNoticeList', res.data.data.data)
        this.noticeList = res.data.data.data
      })
    },
    Jump(row) {
      localStorage.setItem('row', JSON.stringify(row))
      this.$router.push({ name: 'noticeDetails' })
    },
    sort(xData, yData) {
      const aggregate = []
      xData.forEach((item, index) => {
        const aggregateItem = {}
        aggregateItem.name = item
        aggregateItem.value = yData[index]
        aggregate.push(aggregateItem)
      })
      aggregate.sort(this.sortData)
      this.merchant.xAxis.data = []
      this.merchant.series[0].data = []
      aggregate.forEach(item => {
        this.merchant.xAxis.data.push(item.name)
        this.merchant.series[0].data.push(item.value)
      })
      console.log(aggregate)
    },
    sortData(a, b) {
      return b.value - a.value
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 24px;
}
// top 块
.top-box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  .top-left {
    width: 60%;
    .today-summary {
      width: 100%;
      height: 207px;
      .wrapper {
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
        .box {
          color: white;
          width: 209px;
          height: 111px;
          background-size: cover;
          > div {
            display: flex;
            align-items: center;
            margin-top: 20px;
            margin-left: 24px;
            img {
              width: 16px;
              height: 16px;
            }
            span {
              margin-left: 6px;
            }
          }
          > span {
            display: flex;
            height: 30px;
            justify-content: center;
            margin-top: 16px;
            strong {
              font-size: 30px;
              font-weight: normal;
            }
            span {
              margin-left: 8px;
              margin-top: 10px;
            }
          }
        }
        .item-1 {
          background: url(~@/assets/homepage/home/bj_1.png);
          background-size: cover;
        }
        .item-2 {
          background: url(~@//assets/homepage/home/bj_2.png);
          background-size: cover;
        }
        .item-3 {
          background: url(~@/assets/homepage/home/bj_3.png);
          background-size: cover;
        }
        .item-4 {
          background: url(~@/assets/homepage/home/bj_4.png);
          background-size: cover;
        }
      }
    }
    .merchant-overview {
      margin-top: 24px;
      width: 100%;
      height: 162px;
      .wrapper {
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
        .box {
          width: 33%;
          height: 58px;
          display: flex;
          > div {
            display: flex;
            flex-direction: column;
            img {
              width: 40px;
              height: 40px;
              margin-top: 5px;
            }
            span {
              margin-left: 10px;
              opacity: 0.7;
              font-size: 16px;
            }
            > .explain {
              margin-top: 14px;
              color: #000000;
              font-weight: bold;
            }
          }
        }
        .box:not(:first-child) {
          border-left: solid 1px #cccccc;
          padding-left: 24px;
        }
      }
    }
  }
  .top-right {
    width: 38%;
    height: 393px;
    .title {
      width: 100%;
      height: 275px;
      border-bottom: 1px solid #E6E6E6;
      overflow: hidden;
      div {
        color: #A9A9A9;
        font-size: 16px;
        display: flex;
        font-weight: normal;
        justify-content: space-between;
        margin-bottom: 17px;
        .date {
          font-size: 14px;
        }
        .heading{
          cursor: pointer;
        }
      }
    }
    .see-more {
      width: 100%;
      text-align: center;
      margin-top: 19px;
      color: #4091f7;
      span {
        margin-right: 13px;
        cursor: pointer;
      }
      img {
        cursor: pointer;
        width: 7.44px;
        height: 11.84px;
      }
    }
  }
}
// mid 块
.middle-box {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  .item-sales,
  .company-sales {
    height: 438px;
    width: 49%;
    position: relative;
  }
  // .item-sales{}
  // .company-sales{}
}
// bottom 块
.bottom-box{
  margin-top: 24px;
  height: 178px;
  width: 100%;
  .wrapper{
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    .box{
      width: 401px;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      >span:first-child{opacity: 0.7;margin-bottom: 16px;}
      >span:last-child{
        display: flex;
        strong{font-weight: normal;font-size: 30px;}
         span{margin-left: 6px;margin-top: 11px;}
      }
    }
  }
}
h4 {
  margin-top: 0;
}
.header{
  display: flex;
  justify-content: space-between;
}
// 图标无数据显示
.noData{
  flex-direction: column;
  align-items: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-size: 16px;
  color: #999999;
  img{width: 120px;height: 107px;}
  span{
    margin-top: 10px;
    text-align: center;
    display: block;
  }
  z-index: 100;
}
.merchantNoData{
  display: none;
  //display: flex;
}
.el-date-editor.el-input{
  width: 120px;
}
</style>

